<template>
    <div class="pic-content-wrap">
        <div class="banner">
            <div class="people"></div>
            <div class="top-text">
                <div>玲玲</div>
                <div>
                    <p>财会副业</p>
                    <span>Finance and Accounting</span>
                </div>
            </div>
            <div class="middle-text">
                <div>财税知识分享</div>
                <div><em>玲玲</em>导师</div>
            </div>
        </div>
        <div class="question">
            <div class="tag"><i class="iconfont">&#xe613;</i><span>问</span></div>
            <div class="input" ref="questionEl" contenteditable="true">在此输入问题</div>
        </div>
        <div class="answer">
            <div class="tag"><i class="iconfont">&#xe613;</i><span>答</span></div>
            <div class="input" ref="answerEl" contenteditable="true">在此输入回答</div>
        </div>

        <div class="qrcode-img">
            <div>更多财税知识扫描</div>
            <img :src="qrcodeUrl"/>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
    setup () {
        const qrcodeUrl = ref('./imgs/ll.png')
        const questionEl = ref(null)
        const answerEl = ref(null)

        onMounted(() => {
            questionEl.value.addEventListener('paste', (e) => {
                e.preventDefault()
                const text = e.clipboardData.getData('text/plain')
                questionEl.value.innerHTML = text
            })
            answerEl.value.addEventListener('paste', (e) => {
                e.preventDefault()
                const text = e.clipboardData.getData('text/plain')
                answerEl.value.innerHTML = text
            })
        })

        return {
            qrcodeUrl,
            questionEl,
            answerEl
        }
    }
}
</script>
